import React from 'react';
import { Card } from 'yd';
import { Tabs, Modal, Spin } from 'antd';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment';
import PropTypes from 'prop-types';
import './tabEcharts.less';
import SelectTime from './SelectTime.jsx';

const { TabPane } = Tabs;

const TabEcharts = props => {
  let tabName = null;
  tabName = props.tabNames.map(item => {
    return (
      <TabPane tab={item} key={item} style={{}}>
        <ReactEcharts option={props.option} style={props.style || { height: 250 }} />
      </TabPane>
    );
  });
  return (
    <Spin tip="Loading..." spinning={props.spinVis}>
      <Card
        clearDefaultStyle
        title={props.title}
        onChange={props.cardChange}
        buttons={props.buttons}
      >
        <Tabs defaultActiveKey="water_0" onChange={props.tabChange}>
          {tabName}
        </Tabs>
        <Modal
          title="选择日期"
          visible={props.visible}
          onCancel={props.onModalCancel}
          footer={null}
          width={600}
        >
          <SelectTime
            onChange={props.timeChange}
            selectOptions={props.selectOptions}
            defaultValue={{
              timeUnit: props.selectOptions[0],
              startTime: moment().day(1),
              endTime: moment().day(7),
            }}
            value={props.value}
          />
        </Modal>
      </Card>
    </Spin>
  );
};

/**
 * 时间选择组件
 * @prop {string} title -card标题
 * @prop {array} tabNames -tab名称
 * @prop {object} option -echats-option
 * @prop {bool} visible -弹框是否可见
 * @prop {bool} spinVis -loading效果显示隐藏
 * @prop {function} tabChange -tab切换事件
 * @prop {function} onModalCancel -关闭弹框事件
 * @prop {function} getStartTime -选择开始时间事件
 * @prop {function} getEndTime -选择结束时间事件
 * @prop {function} cardChange -card年月日切换事件
 * @prop {array} buttons -card的按钮
 * @prop {array} selectOptions -更多年月日的配置
 */
TabEcharts.propTypes = {
  title: PropTypes.string,
  tabNames: PropTypes.array.isRequired,
  option: PropTypes.object.isRequired,
  visible: PropTypes.bool,
  spinVis: PropTypes.bool,
  tabChange: PropTypes.func,
  onModalCancel: PropTypes.func,
  timeChange: PropTypes.func,
  cardChange: PropTypes.func,
  buttons: PropTypes.array,
  selectOptions: PropTypes.array,
  value: PropTypes.object,
};
TabEcharts.defaultProps = {
  title: '',
  visible: false,
  spinVis: false,
  buttons: [
    { title: '日', value: 'day' },
    { title: '周', value: 'week' },
    { title: '月', value: 'month' },
    { title: '年', value: 'year' },
    { title: '更多', value: 'more' },
  ],
  selectOptions: ['日', '月', '年'],
  tabChange: () => null,
  onModalCancel: () => null,
  timeChange: () => null,
  cardChange: () => null,
  value: null,
};
export default TabEcharts;
